<template>
  <div class="finance">
    <!-- 盈利能力 -->
    <view-item>
      <div slot="itemData" class="itemData profit">
        <div class="left">
          <i class="bossVersion">&#xe605;</i>
          <p class="title">盈利能力</p>
        </div>
        <em></em>
        <div class="right">
          <div class="top">
            <p class="txt">利润总额</p>
            <p class="num">
              <i-count-up
                :startVal="startVal"
                :endVal="totalData.totalProfit"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
              <!-- <span>{{parseInt(totalData.totalProfit)}}<i v-if="(Math.floor(totalData.totalProfit*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.totalProfit*100)/100).toString().substring((Math.floor(totalData.totalProfit*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.totalProfit*100)/100).toString().length)}}</i></span> -->
              <i class="units">万元</i>
            </p>
          </div>
          <div class="bot">
            <div class="trial">
              <p class="txt">总资产
                <br>收益率
              </p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.allCapitalEarningsRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">毛利润</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.grossInterestRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">净利率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.netInterestRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 运营能力 -->
    <view-item>
      <div slot="itemData" class="itemData operate">
        <div class="left">
          <i class="bossVersion">&#xe604;</i>
          <p class="title">运营能力</p>
        </div>
        <em></em>
        <div class="right">
          <div class="top">
            <p class="txt">资产总额</p>
            <p class="num">
              <i-count-up
                :startVal="startVal"
                :endVal="totalData.totalAssets"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
              <!-- <span>{{parseInt(totalData.totalAssets)}}<i v-if="(Math.floor(totalData.totalAssets*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.totalAssets*100)/100).toString().substring((Math.floor(totalData.totalAssets*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.totalAssets*100)/100).toString().length)}}</i></span> -->
              <i class="units">万元</i>
            </p>
          </div>
          <div class="bot">
            <div class="trial">
              <p class="txt">总资产
                <br>周转率
              </p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.totalAssetsTurnoverRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">应收账款
                <br>周转率
              </p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.accountsReceivableTurnoverRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">存货周转率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.inventoryTurnoverRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 偿债能力 -->
    <view-item>
      <div slot="itemData" class="itemData debt">
        <div class="left">
          <i class="bossVersion">&#xe602;</i>
          <p class="title">偿债能力</p>
        </div>
        <em></em>
        <div class="right">
          <div class="top">
            <p class="txt">资产负债率</p>
            <p class="num">
              <i-count-up
                :startVal="startVal"
                :endVal="totalData.assetLiabilityRate"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
              <i class="units">%</i>
              <!-- <span>{{totalData.assetLiabilityRate}}<i class="units">%</i></span> -->
            </p>
          </div>
          <div class="bot">
            <div class="trial">
              <p class="txt">流动比率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.flowRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">速动比率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.speedRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 增长能力 -->
    <view-item>
      <div slot="itemData" class="itemData increase">
        <div class="left">
          <i class="bossVersion">&#xe603;</i>
          <p class="title">增长能力</p>
        </div>
        <em></em>
        <div class="right">
          <div class="top">
            <p class="txt">营业收入</p>
            <p class="num">
              <i-count-up
                :startVal="startVal"
                :endVal="totalData.businessIncome"
                :decimals="decimals"
                :duration="duration"
                :options="options"
                @ready="onReady"
              ></i-count-up>
              <!-- <span>{{parseInt(totalData.businessIncome)}}<i v-if="(Math.floor(totalData.businessIncome*100)/100).toString().lastIndexOf('.') >= 0" >{{(Math.floor(totalData.businessIncome*100)/100).toString().substring((Math.floor(totalData.businessIncome*100)/100).toString().lastIndexOf("."),(Math.floor(totalData.businessIncome*100)/100).toString().length)}}</i></span> -->
              <i class="units">万元</i>
            </p>
          </div>
          <div class="bot">
            <div class="trial">
              <p class="txt">营业收入增长率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.businessIncomeRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
            <em></em>
            <div class="trial">
              <p class="txt">净利润增长率</p>
              <p class="num">
                <span class="flex-ib">
                  {{totalData.netProfitGrowthRate}}
                  <i class="units">%</i>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </view-item>
    <!-- 营业收入预算及实际对比 -->
    <div>
      <item-title>
        <span slot="txt" class="txt">营业收入预算及实际对比</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:万元</div>
          <bar-charts v-model="takingArr" :option="takingOption"></bar-charts>
        </div>
      </view-item>
    </div>
    <!-- 考核利润预算及实际对比 -->
    <div>
      <item-title>
        <span slot="txt" class="txt">考核利润预算及实际对比</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:万元</div>
          <bar-charts v-model="assessmentOfProfitsArr" :option="assessmentOfProfitsOption"></bar-charts>
        </div>
      </view-item>
    </div>
    <!-- 预期应收账款 -->
    <div>
      <item-title>
        <span slot="txt" class="txt">预期应收账款</span>
      </item-title>
      <view-item class="chartItem">
        <div slot="itemData" class="chartData">
          <div class="chartTips">单位:万元</div>
          <bar-chart v-model="receivablesArr" :option="receivablesOption"></bar-chart>
        </div>
      </view-item>
    </div>
    <!-- 期间费用 -->
    <div class="periodCost">
      <item-title>
        <span slot="txt" class="txt">期间费用</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="periodCostData taxationData">
          <div class="left">
            <div class="chartTips">单位:万元</div>
            <pie-chart v-model="useArr" :option="seniorityOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p class="title">点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
    <!-- 税费 -->
    <div class="taxation">
      <item-title>
        <span slot="txt" class="txt">税费</span>
      </item-title>
      <view-item>
        <div slot="itemData" class="periodCostData taxationData">
          <div class="left">
            <div class="chartTips">单位:万元</div>
            <pie-chart v-model="taxArr" :option="taxationOption"></pie-chart>
          </div>
          <em></em>
          <div class="right">
            <p class="title">点击左边各项
              <br>以显示明细
            </p>
          </div>
        </div>
      </view-item>
    </div>
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
import pieChart from "@/components/Chart/pieChart";
import barChart from "@/components/Chart/barChart";
import barCharts from "@/components/Chart/barCharts";
import itemTitle from "@/components/bossVersion/itemTitle";
import viewItem from "@/components/bossVersion/viewItem";
import {
  GetFinanceProfitDistributionForTrendChartForBoss,
  GetFinancialSituationForPlate
} from "@/api/finance/index";
export default {
  components: {
    ICountUp,
    pieChart,
    barChart,
    barCharts,
    itemTitle,
    viewItem
  },
  data() {
    return {
      // 数字
      startVal: 0,
      endVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      totalData: {
        totalProfit: 0,
        allCapitalEarningsRate: 0,
        grossInterestRate: 0,
        netInterestRate: 0,
        totalAssets: 0,
        totalAssetsTurnoverRate: 0,
        accountsReceivableTurnoverRate: 0,
        inventoryTurnoverRate: 0,
        assetLiabilityRate: 0,
        flowRate: 0,
        speedRate: 0,
        businessIncome: 0,
        businessIncomeRate: 0,
        netProfitGrowthRate: 0,
        targetList: [
          {
            code: 0,
            codeName: "string",
            list: [
              {
                name: "string",
                value: 0,
                percent: "string"
              }
            ]
          }
        ]
      }, // 总数据
      useArr: [], // 期间费用
      taxArr: [], // 税费
      takingArr: [], // 营业收入
      assessmentOfProfitsArr: [], // 考核利润
      receivablesArr: [], // 应收账款
      taxationOption: {
        color: ["#FF7145", "#48e5ff", "#f0bd26", "#28e787", "#ff3e9a"],
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      // 期间费用 chart option
      seniorityOption: {
        color: ["#48e5ff", "#28e787", "#f0bd26", "#ff3e9a", "#FF7145"],
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      // 应收账款 chart option
      receivablesOption: {
        barWidth: 35,
        startColor: "#48e5ff",
        endColor: "#088ceb",
        grid: {
          top: "20%",
          left: "15%",
          height: "60%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        // showUnit: true,
        unit: "%"
      },
      // 营业收入 chart option
      takingOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#f0bd26", "#28e787"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "9%",
          height: "50%"
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        labelDefault: 2
      },
      // 考核利润 chart option
      assessmentOfProfitsOption: {
        dataZoom: [
          {
            type: "inside"
          },
          {
            type: "slider",
            show: false
          }
        ],
        hidePieMargin: true,
        color: ["#FF7145", "#48e5ff"],
        legend: {
          top: -5,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: "20%",
          left: "14%",
          height: "50%"
        },
        xAxis: {
          axisLabel: {
            rotate: 45
          }
        },
        labelDefault: 2
      }
    };
  },
  mounted() {
    this.fetchBarChartsData(); // 查询barcharts数据
    this.fetchTotalData(); // 总数据
  },
  methods: {
    async fetchTotalData() {
      const p = {
        plateId: "9006"
      };
      try {
        var res = await GetFinancialSituationForPlate(p);
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
          res.data.result.targetList.forEach(element => {
            switch (element.code) {
              case 31006:
                this.$set(this, "useArr", element.list);
                break;
              case 31013:
                this.$set(this, "taxArr", element.list);
                break;
              case 31014:
                this.$set(this, "receivablesArr", element.list);
                break;
              default:
                break;
            }
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取营业收入数据、考核利润数据
    async fetchBarChartsData() {
      const p = {
        plateId: "9006"
      };
      try {
        var res = await GetFinanceProfitDistributionForTrendChartForBoss(p);
        if (res.data.code === "0") {
          var result = res.data.result;
          var newListData = [];
          var newListData2 = [];
          var newObj = {};
          result.singleTargetList.forEach(element => {
            switch (element.code) {
              case 50001:
                element.list.forEach(item => {
                  newObj = {
                    name: this.$utils.formatterMonthFun(item.name),
                    list: [
                      {
                        name: element.codeName,
                        value: item.value
                      }
                    ]
                  };
                  newListData.push(newObj);
                });
                break;
              case 50002:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData[index].list.push(newObj);
                });
                break;
              case 50004:
                element.list.forEach(item => {
                  newObj = {
                    name: this.$utils.formatterMonthFun(item.name),
                    list: [
                      {
                        name: element.codeName,
                        value: item.value
                      }
                    ]
                  };
                  newListData2.push(newObj);
                });
                break;
              case 50005:
                element.list.forEach((item, index) => {
                  newObj = {
                    name: element.codeName,
                    value: item.value
                  };
                  newListData2[index].list.push(newObj);
                });
                break;
              default:
                break;
            }
          });
          this.$set(this, "takingArr", newListData);
          this.$set(this, "assessmentOfProfitsArr", newListData2);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/bossVersion/_basics";

.finance {
  line-height: 1;
  .item {
    width: 100%;
    height: 1.35rem;
    margin-bottom: 0.1rem;
    &:nth-last-of-type(1) {
      margin-bottom: 0;
    }
  }
  .chartItem {
    height: 1.65rem;
  }
  .periodCost,
  .taxation {
    & > .item {
      height: 1.65rem;
      & > .periodCostData {
        @include flexYcen;
        // padding: 0.19rem 0;
        height: 100%;
        & > .left {
          flex: 1;
          height: 100%;
        }
        & > em {
          width: 1px;
          height: 1.25rem;
          background-color: $color9;
        }
        & > .right {
          width: 1.07rem;
          color: $color3;
          text-align: center;
          .units {
            font-size: 0.12rem;
          }
          & > .title {
            font-size: 0.12rem;
          }
          & > .num {
            margin: 0.1rem 0;
            & > span {
              @include din(0.2rem);
              & > i {
                font-size: 0.12rem;
              }
            }
          }
          & > .rate {
            & > span {
              @include din(0.14rem);
              & > i {
                font-size: 0.12rem;
              }
            }
          }
        }
      }
      & > .taxationData {
        & > .left {
          position: relative;
          .chartTips {
            position: absolute;
          }
        }
        & > .right {
          color: $color1;
          line-height: 1.5;
        }
      }
    }
  }
  .itemData {
    @include flexYcen;
    .left {
      @include flexFdcXcen;
      width: 1.06rem;
      & > .bossVersion {
        font-size: 0.2rem;
      }
      & > .title {
        margin-top: 0.08rem;
        @include bold(0.15rem);
      }
    }
    & > em {
      width: 1px;
      height: 0.9rem;
      margin-right: 0.15rem;
      background-color: $color9;
    }
    .right {
      flex: 1;
      & > .top {
        & > .txt {
          margin-bottom: 0.03rem;
          font-size: 0.14rem;
        }
        & > .num {
          @include din(0.3rem);
          & > span {
            font-size: 0.3rem;
            & > i {
              font-size: 0.12rem;
            }
          }
          & > .units {
            font-size: 0.12rem;
          }
        }
      }
      & > .bot {
        @include flexYend;
        margin-top: 0.06rem;
        & > .trial {
          width: calc(100% / 3 - 0.14rem);
          & > .txt {
            margin-bottom: 0.03rem;
            font-size: 0.12rem;
            line-height: 1.2;
          }
          & > .num {
            & > span {
              @include din(0.17rem);
              & > i {
                font-size: 0.1rem;
              }
            }
          }
        }
        & > em {
          width: 1px;
          height: 0.28rem;
          margin: 0 0.14rem;
          background-color: $color9;
        }
      }
    }
  }
  // 盈利能力
  .profit {
    color: $color3;
  }
  // 运营能力
  .operate {
    color: $color4;
  }
  // 偿债能力
  .debt,
  .increase {
    color: $color5;
    & > .right {
      & > .bot {
        & > .trial {
          width: calc(100% / 2 - 0.14rem);
        }
      }
    }
  }
  // 增长能力
  .increase {
    color: $color1;
  }
  .chartData {
    position: relative;
    z-index: 1;
    height: 100%;
    & > .chartTips {
      @include absoluteTLSide(0, 0, 1);
    }
  }
}
</style>
